<template>
  <section class="m-4">
    <el-card>
      <section slot="header" class="flex items-center">
        <p>用户ID： </p>
        <el-input
          v-model="formData.user_code"
          class="mr-8"
          clearable
          placeholder="请输入用户ID"
        />
        <p>用户昵称： </p>
        <el-input
          v-model="formData.nickname"
          class="mr-8"
          clearable
          placeholder="请输入用户昵称"
        />
        <p>任务类型： </p>
        <el-select
          v-model="formData.reward_type"
          class="mr-8" clearable
          value=""
        >
          <el-option label="礼物" value="gift"/>
          <el-option label="金币" value="coin"/>
          <el-option label="商品" value="product"/>
        </el-select>
        <p>领取时间： </p>
        <el-date-picker
          v-model="dateList"
          class="mr-8"
          end-placeholder="结束日期"
          range-separator="至"
          start-placeholder="开始日期"
          type="datetimerange"
        />
        <el-button type="primary" @click="initData()">搜索</el-button>
      </section>

      <el-table :data="tableData" border class="mx-4" stripe>
        <el-table-column label="记录ID" prop="id"/>
        <el-table-column label="用户ID" prop="user_code"/>
        <el-table-column label="用户昵称" prop="nickname"/>
        <el-table-column label="奖励类型" prop="reward_type">
          <template slot-scope="{row}">
            <el-tag v-if="row.reward_type === 'gift'" type="success">礼物</el-tag>
            <el-tag v-else-if="row.reward_type === 'product'" type="primary">商品</el-tag>
            <el-tag v-else type="warning">金币</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="任务描述" prop="desc"/>
        <el-table-column label="现实价值" prop="total_coin"/>
        <el-table-column label="领取时间" prop="created_at"/>
      </el-table>

      <el-pagination
        :page-size="15"
        :total="meta.total"
        background
        class="text-right mt-4"
        layout="prev, pager, next"
        @current-change="initData"
      />
    </el-card>

  </section>
</template>

<script>
import request from '@/utils/request'
import { getDateListToBackend } from '@/utils'

export default {

  data() {
    return {
      tableData: [],
      meta: {
        page: 1,
        total: 0
      },
      dateList: [],
      formData: {
        user_code: '',
        nickname: '',
        reward_type: '',
        date: ''
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData(page = 1) {
      try {
        if (this.dateList !== undefined && Array.isArray(this.dateList) && this.dateList.length > 0) {
          this.formData.date = getDateListToBackend(this.dateList)
        }
        if (!this.dateList) this.formData.date = ''

        const { data: { list, meta } } = await request({
          url: '/presenter/reward/log',
          params: {
            page,
            ...this.formData
          }
        })

        this.tableData = list
        this.meta.page = meta.page
        this.meta.total = meta.total

      } catch (e) {
        console.error(e)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input {
  width : 200px;
}
</style>
